<template>
  <el-drawer
    v-model="show_taskOprLog_box"
    direction="rtl"
    size="80%"
    destroy-on-close
    :close-on-click-modal="false"
    @close="$emit('close')"
    @open="open()"
  >
    <template #title><h4>操作记录</h4></template>
    <template #default>
      <el-table :data="list" border :span-method="arraySpanMethod" max-height="800">
        <el-table-column label="操作人">
          <template #default="scope">
            <div v-for="item in member_list" :key="item.id">
              <span v-if="item.memberId == scope.row.operatorId">{{ item.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作时间">
          <template #default="scope">
            <div v-if="(scope.row.operateTime ?? '') !== ''">
              {{ formatDate(parseInt(scope.row.operateTime), "YYYY-MM-DD hh:mm:ss") }}
            </div>
            <div v-else>-- --</div>
          </template>
        </el-table-column>
        <el-table-column label="操作字段" prop="filedName"></el-table-column>
        <el-table-column label="操作前数据">
          <template #default="scope">
            <div v-if="scope.row.filed == 'customStatus'">
              <div v-for="item in customStatusList" :key="item.id">
                <span v-if="item.code == scope.row.oldValue">{{ item.name }}</span>
              </div>
            </div>
            <div v-else-if="scope.row.filed == 'managerId'">
              <div v-for="item in member_list" :key="item.id">
                <span v-if="item.memberId == scope.row.oldValue">{{ item.name }}</span>
              </div>
            </div>
            <div v-else-if="scope.row.filed == 'groupLeaderId'">
              <div v-for="item in member_list" :key="item.id">
                <span v-if="item.memberId == scope.row.oldValue">{{ item.name }}</span>
              </div>
            </div>
            <div v-else-if="scope.row.filed == 'deptId'">
              <div v-for="item in dept_list_arr" :key="item.id">
                <span v-if="item.id == scope.row.oldValue">{{ item.name }}</span>
              </div>
            </div>
            <div v-else-if="scope.row.filed == 'difficultyDegree'">
              <span v-if="scope.row.oldValue == 1">简单</span>
              <span v-if="scope.row.oldValue == 2">一般</span>
              <span v-if="scope.row.oldValue == 3">困难</span>
            </div>
            <div v-else-if="scope.row.filed == 'planStartTime'">
              {{ formatDate(parseInt(scope.row.oldValue), "YYYY-MM-DD hh:mm:ss") }}
            </div>
            <div v-else-if="scope.row.filed == 'planEndTime'">
              {{ formatDate(parseInt(scope.row.oldValue), "YYYY-MM-DD hh:mm:ss") }}
            </div>
            <div v-else>{{ scope.row.oldValue }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作后数据">
          <template #default="scope">
            <div v-if="scope.row.filed == 'customStatus'">
              <div v-for="item in customStatusList" :key="item.id">
                <span v-if="item.code == scope.row.newValue">{{ item.name }}</span>
              </div>
            </div>
            <div v-else-if="scope.row.filed == 'managerId'">
              <div v-for="item in member_list" :key="item.id">
                <span v-if="item.memberId == scope.row.newValue">{{ item.name }}</span>
              </div>
            </div>
            <div v-else-if="scope.row.filed == 'groupLeaderId'">
              <div v-for="item in member_list" :key="item.id">
                <span v-if="item.memberId == scope.row.newValue">{{ item.name }}</span>
              </div>
            </div>

            <div v-else-if="scope.row.filed == 'deptId'">
              <div v-for="item in dept_list_arr" :key="item.id">
                <span v-if="item.id == scope.row.newValue">{{ item.name }}</span>
              </div>
            </div>
            <div v-else-if="scope.row.filed == 'difficultyDegree'">
              <span v-if="scope.row.newValue == 1">简单</span>
              <span v-if="scope.row.newValue == 2">一般</span>
              <span v-if="scope.row.newValue == 3">困难</span>
            </div>
            <div v-else-if="scope.row.filed == 'planStartTime'">
              {{ formatDate(parseInt(scope.row.newValue), "YYYY-MM-DD hh:mm:ss") }}
            </div>
            <div v-else-if="scope.row.filed == 'planEndTime'">
              {{ formatDate(parseInt(scope.row.newValue), "YYYY-MM-DD hh:mm:ss") }}
            </div>
            <div v-else>{{ scope.row.newValue }}</div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { formatDate } from "@/utils/check_role";
import { ref, toRefs } from "vue";
import axios from "@/service/HttpRequest";
import serviceApi from "@/service/api";
import { ElMessage } from "element-plus";
const props = defineProps({
  show_taskOprLog_box: Boolean,
  item_form_data: Object,
  member_list: Array,
  customStatusList: Array,
  dept_list_arr: Array,
});
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0 || columnIndex === 1) {
    if (row.num) {
      return {
        rowspan: row.num,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};
const {
  item_form_data,
  show_taskOprLog_box,
  member_list,
  dept_list_arr,
  customStatusList,
} = toRefs<any>(props);
const list = ref([]);
const open = () => {
  axios
    .request({
      url: serviceApi.taskOprLog_list + "/" + item_form_data.value.id,
      method: "post",
    })
    .then((res) => {
      list.value = [];
      res.data.forEach((i) => {
        i.paramChangeJson = JSON.parse(i.paramChangeJson);
        i.paramChangeJson[0].num = i.paramChangeJson.length;
        i.paramChangeJson.forEach((ii, index) => {
          ii.operateTime = i.operateTime;
          ii.operatorId = i.operatorId;
          list.value.push(ii);
        });
      });
      console.log(list.value);
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
</script>

<style lang="scss" scoped></style>
